<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!--v-cloak 防止闪烁 -->
    <div id="app" v-cloak>
        <h2 data-index="1">hello vue</h2>
        <!-- 小胡子语法  插值符 -->
        {{msg}}

        <!-- 插值符中 必要是一个表达式 （一定要有返回值）  -->
        <p>{{1000}}</p>
        <!-- 注意这里要打空格 -->
        <p>{{ {a:1,b:2} }}</p>

        <p>{{ [1,2,3,4,5,6] }}</p>

        <p>性别： {{ sex?'男':'女' }}</p>
        <!-- 注意这里不能这样写，因为小胡子语句已经自带了vm.$data这个 -->
        <!-- <p>性别： {{ vm.$data.sex?'男':'女' }}</p> -->

        <p>{{ Date.now() }}</p>

        <!-- 插值符中，尽量不要涉及到太复杂的逻辑 如下就是一个反例-->
        <!-- reverse() 方法用于颠倒数组中元素的顺序。[7,6,5,4,3,2,1] -->
        <!-- sort() 方法用于对数组的元素进行排序。默认默认排序顺序为按字母升序。[1,2,3,4,5,6,7] -->
        <!-- <p>{{ [1,2,3,4,5,6,7,577,8,40,166].sort() }}</p> -->
        <!-- join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。1/2/3/4/5/6/7 -->
        <!-- split() 方法用于把一个字符串分割成字符串数组。 -->
        <p>{{ [1,2,3,4,5,6,7].reverse().sort().join('/') }}</p>
        <p>{{ [1,2,3,4,5,6,7].reverse().sort().join('/').split() }}</p>

        <!-- 插值符中不要写语句 -->
        <!-- <p>{{ if(true) {console.log('hello')} }}</p> -->

        <!-- 注意，不能先写这个，再往data里面加数据 ；要data里面先有数据，再写小胡子语句-->
        <!-- <p>{{ text }}</p> -->



    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 全局的构造函数Vue

        setTimeout(() => {
            var vm = new Vue({
                el: "#app", // 这个vue实例挂载的根元素
                data: { // 数据
                    msg: "hello vue1111", // vue中的data是 响应式的，data中的数据发生改变， vue渲染出的页面也会变化
                    sex: true
                }
            })
        },2000)
    </script>
</body>

</html>